<template>
  <div class="space" :style="{ ...styles }">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { xxToRem } from '@/utils';
import { computed } from 'vue';

interface SpaceProps {
  gap?: string | number;
  columnGap?: string | number;
  rowGap?: string | number;
  wrap?: boolean;
  direction?: 'row' | 'column';
  layout?: 'flex' | 'grid';
}
const props = withDefaults(defineProps<SpaceProps>(), {
  gap: '20px',
  columnGap: '20px',
  rowGap: '20px',
  wrap: false,
  direction: 'row',
  layout: 'flex',
});

const styles = computed(() => {
  return {
    gap: xxToRem(props.gap),
    columnGap: xxToRem(props.columnGap),
    rowGap: xxToRem(props.rowGap),
    flexWrap: props.wrap ? 'wrap' : 'nowrap',
    display: props.layout,
    flexDirection: props.direction,
  };
});
</script>

<style scoped>
.space {
  width: 100%;
}
</style>
